<template>
    <ul
        v-if="visible"
        class="contextmenu el-dropdown-menu"
        :style="{ left: left + 'px', top: top + 'px' }"
      >
        <li
          class="el-dropdown-menu__item user-none"
          v-for="(item, index) in list"
          @click="$emit('handleClick', index, true)"
          :key="item.icon"
          v-show="index === 1 && tagViewLenght === 1 ? false : true"
        >
          <SvgIcon :showDefault="false" size="16" :name="item.icon" />
          {{ item.name }}
        </li>
      </ul>
    </template>
     
    <script setup >
    import { watch } from 'vue'
    const $props = defineProps({
        list: [],
        tagViewLenght: Number,
        visible: Boolean,
        left: Number,
        top: Number
    }) 
     
    const $emit = defineEmits(['update:visible', 'handleClick'])
    watch(
      () => $props.visible,
      (newValue) => {
        if (newValue) {
          document.body.addEventListener('click', closeMenu)
        } else {
          document.body.removeEventListener('click', closeMenu)
        }
      },
    )
    //关闭右键事情Tabs
    const closeMenu = () => $emit('update:visible', false)

    </script>